<template>
  <div class="daily-page">
    <van-nav-bar title="每日推荐" left-arrow @click-left="$router.back()" />
    <div class="section-title">推荐理由：根据你的听歌习惯为你推荐</div>
    <van-cell-group>
      <van-cell v-for="song in songs" :key="song.id" clickable @click="playSong(song)">
        <template #title>
          <div class="song-title">{{ song.title }}</div>
        </template>
        <template #label>
          <div class="song-info">
            <img :src="song.cover" class="song-cover" />
            <span class="artist">{{ song.artist }}</span> · <span class="album">{{ song.album }}</span> · <span class="play">{{ song.playCount }}次播放</span>
          </div>
        </template>
        <template #right-icon>
          <van-icon name="play-circle-o" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { usePlayerStore } from '../stores/player'

const playerStore = usePlayerStore()

// 播放歌曲
const playSong = (song) => {
  const songData = {
    name: song.title,
    artist: song.artist,
    cover: song.cover,
    url: song.url || '/2.mp3'
  };
  playerStore.setSong(songData);
};

const songs = ref([
  { id: 1, title: '晴天', artist: '周杰伦', album: '叶惠美', playCount: 123456, cover: 'https://img2.baidu.com/it/u=168590827,1280265529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', url: '/2.mp3' },
  { id: 2, title: '平凡之路', artist: '朴树', album: '平凡之路', playCount: 98765, cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 3, title: '演员', artist: '薛之谦', album: '绅士', playCount: 54321, cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' },
  { id: 4, title: '起风了', artist: '买辣椒也用券', album: '起风了', playCount: 88888, cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg' },
  { id: 5, title: '稻香', artist: '周杰伦', album: '魔杰座', playCount: 112233, cover: 'https://img0.baidu.com/it/u=3315620404,701141190&fm=253&app=138&f=JPEG?w=834&h=800' },
  { id: 6, title: '青花瓷', artist: '周杰伦', album: '我很忙', playCount: 99876, cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 7, title: '七里香', artist: '周杰伦', album: '七里香', playCount: 87654, cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' },
  { id: 8, title: '夜曲', artist: '周杰伦', album: '11月的萧邦', playCount: 76543, cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg' },
  { id: 9, title: '发如雪', artist: '周杰伦', album: '11月的萧邦', playCount: 65432, cover: 'https://img1.baidu.com/it/u=3575126618,2505183193&fm=253&app=138&f=JPEG?w=820&h=800' },
  { id: 10, title: '东风破', artist: '周杰伦', album: '叶惠美', playCount: 54321, cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 11, title: '菊花台', artist: '周杰伦', album: '依然范特西', playCount: 43210, cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' },
  { id: 12, title: '千里之外', artist: '周杰伦', album: '依然范特西', playCount: 32109, cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg' },
  { id: 13, title: '听妈妈的话', artist: '周杰伦', album: '依然范特西', playCount: 21098, cover: 'https://img0.baidu.com/it/u=2030267494,2401277417&fm=253&app=138&f=JPEG?w=817&h=800' },
  { id: 14, title: '简单爱', artist: '周杰伦', album: '范特西', playCount: 10987, cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 15, title: '龙卷风', artist: '周杰伦', album: 'Jay', playCount: 9876, cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' }
])
</script>
<style scoped>
.daily-page {
  background: var(--van-background-color, #fff);
  min-height: 100vh;
  color: var(--van-text-color, #222);
}
.section-title { font-weight: bold; margin: 18px 0 8px 16px; font-size: 15px;}
.song-info { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.song-cover { width: 36px; height: 36px; border-radius: 6px; margin-right: 8px; }
.song-title { font-weight: bold; font-size: 16px; }
.artist, .album, .play { color: #888; }
</style> 